<template>
  <div class="login">
    <span class="close">
      <i class="iconfont iconicon-test"></i>
    </span>
    <h2 class="logo">
      <i class="iconfont iconnew"></i>
    </h2>
    <Input
      v-model="user.username"
      type="text"
      placeholder="手机号"
      :rules="rules.username"
      msg="手机号码格式错误"
    ></Input>
    <!--自定义v-model-->
    <Input
      v-model="user.password"
      type="text"
      placeholder="密码"
      :rules="rules.password"
      msg="密码格式错误"
      @yanzhengfn = yanzhengfn
    ></Input>
     <div class="security_detection">
       <p>
         密码安全指数
       </p>
       <van-rate v-model="safetyindex"  readonly :color="color"  />
     </div> 
    <Input
      v-model="user.nickname"
      type="text"
      placeholder="昵称"
      :rules="rules.nickname"
      msg="昵称格式错误"
    ></Input>

    <div class="tips">
      <router-link to="/login">已经有账号？去登录</router-link>
    </div>
    <MyButton @fn="registerFn" type="primary"> 注册 </MyButton>
  </div>
</template>

<script>

import "../styles/reigsterlogin.css"

//页面组件
import MyButton from "../components/MyButton";
import Input from "../components/input.vue";

import { userRegisterApi } from "../apis/user";

export default {
  data() {
    return {
      color:'red',
      safetyindex:0,
      user: {
        username: "",
        password: "",
        nickname: "",
      },
      rules: {
        username: /^1\d{10}$|^[a-zA-Z]\w{2,10}$|^1\d{4,5}$/,
        password: /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
        nickname: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
      },
    };
  },
  components: {
    MyButton,
    Input,
  },

  methods: {
    yanzhengfn(num){
       num<2 && (this.color = 'red')
       num>=2 && (this.color = 'rgb(214, 154,23)')
       num>=4 && (this.color = 'green')
      this.safetyindex = num
    },
    registerFn() {
      if(!this.rules.username.test(this.user.username)){
           this.$notify("账号格式错误，请输入正确的手机号");
           return
      }
      if(!this.rules.password.test(this.user.password)){
           this.$notify("密码格式错误，请输入3到18位数字字母或符号");
           return
      }
      if(!this.rules.nickname.test(this.user.nickname)){
           this.$notify("昵称格式格式错误,请输入数字字母或中文");
           return
      }
      userRegisterApi(this.user).then((res) => {
            // console.log(res);
            this.$toast(`注册成功！欢迎你,${this.user.nickname}`);
            localStorage.setItem()
          this.$router.push({ name: "login"});
        
      });
    },
  },
};
</script>

<style lang="less" scoped>
  .security_detection{
    margin-left: 30px;
  }
</style>